import React, { useState, useImperativeHandle, useEffect } from 'react';
import { Collapse, Table, Tooltip, Icon, Input } from 'antd';
import { connect } from 'react-redux';
import { compare } from 'src/utils/compare';
import FormItem from 'src/components/FormItem';

const Panel = Collapse.Panel;

function PrepositionFrom(props) {
  const { disabled, value, returnResults } = props;
  const [returnResultsList, setReturnResultsList] = useState([]);
  const [returnResultsData, setReturnResultsData] = useState([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  console.log(props);
  useEffect(() => {
    let newArr = [];
    let obj = {};
    for (var i = 0; i < returnResults.length; i++) {
      if (!obj[returnResults[i].category]) {
        newArr.push(returnResults[i]);
        obj[returnResults[i].category] = true;
      }
    }
    console.log(newArr);
    var a = newArr.map((it) => {
      it.dataBase = [];
      returnResults.forEach((item) => {
        if (item.category === it.category) {
          it.dataBase.push(item);
        }
      });
      return it;
    });

    setReturnResultsList(a);
    console.log(a, 888);
  }, [returnResults]);

  const formItemsInit = (record) => [
    {
      name: 'output_key' + record.key_id,
      options: {
        initialValue: record.output_key || record.code,
        rules: [
          { required: true, message: '请输入映射CODE' },
          { max: 128, message: '最长128个字符' },
          { pattern: /^[^\u4E00-\u9FA5\s]*$/, message: '非中文和空白字符' },
        ],
      },
      component: <Input className='output_key' data-code={record.var_type_code} disabled={disabled} />,
    },
  ];

  const colums = [
    {
      title: '序号',
      key: 'index',
      width: 50,
      align: 'center',
      render: (text, record, index) => {
        return <span>{index + 1}</span>;
      },
    },
    {
      title: '变量名称',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => {
        return (
          <Tooltip title={text}>
            <span style={compare({ ...props, value: record, compareData: record.compareData }, 'code')}>{text}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '变量CODE',
      dataIndex: 'code',
      key: 'code',
      render: (text, record) => {
        return (
          <Tooltip title={text}>
            <span style={compare({ ...props, value: record, compareData: record.compareData }, 'code')}>{text}</span>
          </Tooltip>
        );
      },
    },
    {
      title: '映射CODE',
      dataIndex: 'output_key',
      key: 'output_key',
      render: (text, record) => {
        if (disabled) {
          return (
            <Input
              className='output_key'
              defaultValue={text || record.code}
              disabled={disabled}
              style={compare({ ...props, value: record, compareData: record.compareData }, 'output_key')}
            />
          );
        } else {
          const formItems = formItemsInit(record);
          return formItems.map((item, index) => {
            return <FormItem {...props} form={props.form} item={item} colNum={1} key={index} />;
          });
        }
      },
    },
    {
      title: '数据类型',
      dataIndex: 'dataType',
      key: 'dataType',
      render: (text, record) => {
        return (
          <Tooltip title={text}>
            <span style={compare({ ...props, value: record, compareData: record.compareData }, 'code')}>{text}</span>
          </Tooltip>
        );
      },
    },
  ].filter(Boolean);
  const rowSelection = {
    columnWidth: 30,
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRowKeys);
    },
    selectedRowKeys: selectedRowKeys,
  };
  return (
    <Collapse expandIcon={({ isActive }) => (isActive ? <Icon type='minus' /> : <Icon type='plus' />)}>
      {returnResultsList.map((it) => {
        it.dataBase = [];
        return (
          <Panel header={it.categoryName} key={it.category}>
            <>
              {value.map((item) => {
                if (item.category === it.category) {
                  it.dataBase.push(item);
                } else {
                  return;
                }
              })}
              <Table
                rowSelection={disabled ? null : rowSelection}
                rowKey={'code'}
                className='fixed'
                dataBase={it.dataBase}
                columns={colums}
                pagination={false}
                style={{ marginBottom: 20 }}
              />
            </>
          </Panel>
        );
      })}
    </Collapse>
  );
}

function mapStateToProps(state) {
  return {
    fieldClassification: state.code.field_classification || [],
  };
}

export default connect(mapStateToProps)(PrepositionFrom);
